<template>
  <div>
    <el-dropdown @command="handlePlateCommand">
      <el-button type="primary">
        选择板块<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in options" :key="item.id" :command="item" :value="item.plateName">{{ item.plateName }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown>
      <el-button type="primary">
        选择股票<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in options2" :key="item.id" :command="item" :value="item.shareName" @click="getSharePriceList(item.code)">{{ item.shareName }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div id="container" style="height: 700px;width: 1500px"></div>
  </div>
</template>

<script setup>
import { sharePlateList, getShareCertificateList } from "../../../api/system/share.js";
import { ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'
import * as echarts from 'echarts';

const options = ref([]);
const options2 = ref([]);

// 在页面加载时获取板块下拉列表数据
onMounted(() => {
  sharePlateList().then(res => {
    options.value = res.data
  })
})

// 获取股票下拉列表数据
const handlePlateCommand = (selectedPlate) => {
  console.log(selectedPlate.id)
  // 当选择板块时，根据板块获取股票数据
  getShareCertificateList(selectedPlate.id).then(res => {
    options2.value = res.data
  })
}

const getSharePriceList = (code) => {
  var app = {};

  var chartDom = document.getElementById('container');
  var myChart = echarts.init(chartDom);
  var option;

  const categories = (function () {
    let now = new Date();
    let res = [];
    let len = 10;
    while (len--) {
      res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
      now = new Date(+now - 2000);
    }
    return res;
  })();
  const categories2 = (function () {
    let res = [];
    let len = 10;
    while (len--) {
      res.push(10 - len - 1);
    }
    return res;
  })();
  const data = (function () {
    let res = [];
    let len = 10;
    while (len--) {
      res.push(Math.round(Math.random() * 1000));
    }
    return res;
  })();
  const data2 = (function () {
    let res = [];
    let len = 0;
    while (len < 10) {
      res.push(+(Math.random() * 10 + 5).toFixed(1));
      len++;
    }
    return res;
  })();
  option = {
    title: {
      text: code
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#283b56'
        }
      }
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    dataZoom: {
      show: false,
      start: 0,
      end: 100
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        data: categories
      },
      {
        type: 'category',
        boundaryGap: true,
        data: categories2
      }
    ],
    yAxis: [
      {
        type: 'value',
        scale: true,
        name: 'Price',
        max: 30,
        min: 0,
        boundaryGap: [0.2, 0.2]
      },
      {
        type: 'value',
        scale: true,
        name: 'Order',
        max: 1200,
        min: 0,
        boundaryGap: [0.2, 0.2]
      }
    ],
    series: [
      {
        name: '成交数量',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: data
      },
      {
        name: '成交价格',
        type: 'line',
        data: data2
      }
    ]
  };
  app.count = 11;
  setInterval(function () {
    let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
    data.shift();
    data.push(Math.round(Math.random() * 1000));
    data2.shift();
    data2.push(+(Math.random() * 10 + 5).toFixed(1));
    categories.shift();
    categories.push(axisData);
    categories2.shift();
    categories2.push(app.count++);
    myChart.setOption({
      xAxis: [
        {
          data: categories
        },
        {
          data: categories2
        }
      ],
      series: [
        {
          data: data
        },
        {
          data: data2
        }
      ]
    });
  }, 2100);

  option && myChart.setOption(option);
}
</script>

<style scoped>
.example-showcase.el-dropdown +.el-dropdown {
  margin-left: 15px;
}
.example-showcase.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>